<!--
 * @description 人物信息组件-人物海报轮播（竖版）
 * @author dumeng
 * @date 2022/11/24
 -->
<template>
  <div
    class="person-swiper4poster-page"
    :class="[title && 'have-title']"
    :style="{
      width: `calc(${this.px2rem(750)} - ${
        this.px2rem(this.option.spacing * 2) || '0px'
      })`,
      'margin-top': top,
      'margin-left': spacing,
      'margin-right': spacing,
      paddingBottom: paddingBottom,
      'background-color': bgcolor,
      'background-image': `url(${imgBg})`,
      'background-repeat': 'no-repeat',
      'background-size': 'auto 100%',
      'background-position': 'top center',
      borderBottomLeftRadius: bottomLeftRadius,
      borderBottomRightRadius: bottomRightRadius,
      borderTopLeftRadius:topLeftRadius,
      borderTopRightRadius:topRightRadius

    }"
  >
    <div
      v-if="title"
      :style="{
        color: titleColor,
        'background-image': `url(${titleImage})`,
        'background-repeat': 'no-repeat',
        'background-size': 'auto 100%',
        'background-position': 'top center',
        'height': height

      }"
      class="title"
    >
      {{ title }}
    </div>
    <div ref="personswiper4poster" class="swiper" :style="{ paddingTop: paddingTop}">
      <div class="swiper-wrapper">
        <div
          v-for="item in list"
          :id="item.id"
          :key="item.id"
          class="swiper-slide"
        >
          <img
            :src="
              setImgPath(getMapping(item, 'imgId'), getMapping(item, 'imgUrl'))
            "
            :onerror="errorIcon"
            :style="{ 'object-fit': imgType }"
            alt=""
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from './../mixins'
import Swiper from 'swiper/swiper-bundle.min.js'
import 'swiper/swiper-bundle.min.css'
import {v4 as uuidv4} from 'uuid'
import errorIcon from '../../images/base/error-icon.png'

export default {
  name: 'Personswiper4poster',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      errorIcon: 'this.src="' + errorIcon + '"',
      list: [
        {
          imgId: '',
          imgUrl: '',
          name: '这里是标题可以隐藏',
          id: uuidv4()
        },
        {
          imgId: '',
          imgUrl: '',
          name: '这里是标题可以隐藏',
          id: uuidv4()
        },
        {
          imgId: '',
          imgUrl: '',
          name: '这里是标题可以隐藏',
          id: uuidv4()
        },
        {
          imgId: '',
          imgUrl: '',
          name: '这里是标题可以隐藏',
          id: uuidv4()
        }
      ],
      pageSize: ''
    }
  },
  computed: {
    // 标题
    title() {
      return this.option.title
    },
    // 标题颜色
    titleColor() {
      return this.option.titleColor
    },
    // 标题背景图
    titleImage() {
      return this.option.titleImage
    },
    // 是否自动播放
    autoplay() {
      return this.option.autoplay
    },
    // 自动轮播时长
    delay() {
      return this.option.delay > 0 ? this.option.delay * 1000 : 5000
    },
    // 是否循环
    loop() {
      return this.option.loop
    },
    // 背景颜色
    bgcolor() {
      return this.option.bgcolor
    },
    imgBg() {
      return this.option.imgBg
    }
  },
  mounted() {
    this.pageSize = this.option.pageSize
    if (this.isInitData) {
      this.initData()
    } else {
      this.initSwiper()
    }
  },
  methods: {
    setData(result) {
      // this.list = result.personswiper4posterList?.data?.rows || []
      let rows = []
      if (this.option.dataorigin === '2') {
        if (Object.prototype.toString.call(result.personswiper4posterList?.data) === '[object Array]') {
          rows = result.personswiper4posterList?.data || []
        } else {
          rows = result.personswiper4posterList?.data.rows || []
        }
      } else {
        rows = result?.personswiper4posterList?.data || []
      }
      this.list = rows
      this.$nextTick(() => {
        this.initSwiper()
      })
    },
    initSwiper() {
      const ths = this
      this.swiper = new Swiper(this.$refs.personswiper4poster, {
        autoplay: this.autoplay,
        delay: this.delay,
        loop: this.loop,
        effect: 'coverflow',
        centeredSlides: true,
        spaceBetween: '11%',
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 300,
          modifier: 1,
          slideShadows: false
        },
        observer: true,
        observeParents: true,
        on: {
          click: function(e) {
            // 后台管理不能跳转
            return
            const id = e.clickedSlide.getAttribute('id')
            if (!id) {
              return
            }
            const info = ths.list.find(item => {
              return item.id === id
            })
            ths.toDetail(info)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import "@/styles/utility/rem.scss";

.person-swiper4poster-page {
  padding-bottom: rem(27);
  padding-top: rem(27);

  &.have-title {
    padding-top: 0;
    z-index: -1;
  }

  .title {
    width: 100%;
    // height: rem(70);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto rem(24);
    font-size: rem(32);
    font-weight: bold;
  }

  .swiper {
    width: 100%;
    height: rem(660);
  }

  .swiper .swiper-wrapper {
    .swiper-slide {
      width: rem(410);
      border-radius: rem(16);

      img {
        width: 100%;
        height: 100%;
        border-radius: 20px;
        background-color: #999;
      }
    }

    .swiper-slide-prev,
    .swiper-slide-next {
      margin-top: rem(16);
      height: rem(600) !important;

      img {
        height: rem(600) !important;
      }
    }

    .swiper-slide-active {
      width: rem(410) !important;
      height: rem(660) !important;
    }
  }
}
</style>
